<!-- 店铺管理 -->
<template>
  <view v-if="shenheStatus == 0" class="applyShop">
    <scroll-view class="scroll" scroll-y>
      <view class="formBox">
        <view class="choosePic" style="border-bottom: 1px solid #f1f1f1">
			<!-- 入驻商logo -->
          <view class="title">
            <text>入驻商logo</text>
            <text>（{{ $t("mdAdmin.necessary") }}）</text>
          </view>
          <view class="choose" v-if="form.logo == ''" @click="addPic('logo')">
            <text class="iconfont icon-camera"></text>
            <text>{{ $t("mdAdmin.upload") }}</text>
          </view>
          <view class="choose" v-else>
            <image :src="form.logo"></image>
            <text
              class="close iconfont icon-close"
              @click.stop="form.logo = ''"
            ></text>
          </view>
        </view>
		<!-- 商户名称 -->
        <view class="formItem">
          <text class="title">商户名称</text>
          <input
            type="text"
            placeholder-class="input-hold"
            placeholder="请输入商户名称"
            v-model="form.name"
          />
        </view>
		
		<!-- 联系人员 -->
       <view class="formItem">
         <text class="title">联系人员</text>
         <input
           type="text"
           placeholder-class="input-hold"
           placeholder="请输入联系人员"
           v-model="form.realname"
         />
       </view>
	   
	   <!-- 联系电话 -->
        <view class="formItem">
          <text class="title">联系电话</text>
          <input
            placeholder-class="input-hold"
            placeholder="请输入联系电话"
            v-model="form.tel"
          />
        </view>
		<!-- 联系微信 -->
        <view class="formItem">
          <text class="title">联系微信</text>
          <input
            placeholder-class="input-hold"
             placeholder="请输入联系微信"
            v-model="form.wechat_name"
          />
        </view>
		<!-- 店铺类目 -->
		<view class="formItem" @click="show1=true">
		  <text class="title">店铺类目</text>
		  <input
		    :disabled='true'
		    placeholder-class="input-hold"
		     placeholder="请选择店铺类目"
		    v-model="form.mch_common_cat_name"
		  />
		   <u-icon size="24" color="#888888" name="arrow-right"></u-icon>
		</view>
		<view class="formItem1" @click="showAddressPicker = true">
		  <text class="title">{{ $t("my.region") }}</text>
		  <AddressPicker
		    :show.sync="showAddressPicker"
		    :province_id.sync="form.province_id"
		    :district_id.sync="form.district_id"
		    :city_id.sync="form.city_id"
		    @confirm="(e) => getAddress(e.position)"
		  ></AddressPicker>
		</view>
		<!-- 地址 -->
		<view class="formItem address-form">
		  <text class="title">{{ $t("my.detail") }}</text>
		  <view class="address-info" @click="gotoLocal">
		    <view
		      class="info-text"
		      :class="form.address || address ? 'color-black' : ''"
		    >
		      <input
		        type="text"
		        disabled
		        v-model="form.address"
		        :placeholder="$t('my.fillDetail')"
		      />
		    </view>
		    <view class="local-box">
		      <i class="iconfont icon-a-map"></i>
		      <text>{{ $t("my.positioning") }}</text>
		    </view>
		  </view>
		</view>
		<!-- 表单 -->
      </view>
    </scroll-view>
   <view class="foot">
	 <u-button class="btn" type="error " shape="circle"  @click="submit">确认修改</u-button>
   </view>
	<!-- 类目 -->
	<u-select
	  v-model="show1"
	  value-name="id"
	  label-name="name"
	  mode="single-column"
	  :list="listMode"
	  @confirm="listConfirm"
	></u-select>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import http from "@/common/http.js";
import AddressPicker from "@/admin/mchRegister/address-picker";


export default {
  components: { Shenhe,AddressPicker},
  data() {
    return {
		showAddressPicker: false,
	 status:1,
	 show1:false,
	 // 是否阅读协议
	 read: true,
	 listMode:[],
      classify: [],
      form: {
		// 店铺logo
		logo:'',
	    // 商户名称
		name: '',
		// 联系人
		realname: '',
		// 电话
		tel: '',
		 // 联系微信
		 wechat_name: '',
		 // 店铺类目
		mch_common_cat_id: '',
		mch_common_cat_name:'',
		// 详细地址
		address: "",
		// 省市区
		province_id: 0,
		city_id: 0,
		district_id: 0,
		// 经纬度
		latitude: "",
		longitude: ""
      },
      areaInfo: "",
      area: "",
      address: "",
      // 地区列表
      districtList: [],
    };
  },
  onLoad(t) {
	this.workerIndex()
  },
  computed: {},
  onShow() {},
  watch: {},
  methods: {
	  getAddress(address) {
	    this.$allrequest.classification
	      .addressSmart({
	        address
	      })
	      .then((res) => {
	        if (res.code == 0) {
	          this.form.province_id = res.data.province_id;
	          this.form.city_id = res.data.city_id;
	          this.form.district_id = res.data.region_id;
	        }
	      });
	  },
	  // 回显数据
	  async getList(){
		  const res =await this.$allrequest.mch_store.mchStoreGet({})
		  if (!res.code) {
				this.form=res.data
				const matchedItem = this.listMode.find(item => item.id == this.form.mch_common_cat_id);
				console.log('matchedItem',matchedItem)
				if (matchedItem) {
				  this.form.mch_common_cat_name = matchedItem.name;
				}
			}
	  },
	  async workerIndex() {
		 const res =await this.$allrequest.mch_store.mchFen({})
		 if (!res.code) {
			this.listMode = res.data.list || [];
			this.getList()
		 }
	  },
	  listConfirm(e){
		  let detail1 = e
		  this.form.mch_common_cat_id=detail1[0].value|| 0
		  this.form.mch_common_cat_name=detail1[0].label || 0
	  },
    // 上传图片
    addPic(e) {
      this.$utils.uploadImage(1, (res) => {
        this.form[e] = res;
      });
    },
    async gotoLocal() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            this.address = res.address;
            this.form.address = res.address;
            this.form.latitude = String(res.latitude);
            this.form.longitude = String(res.longitude);
          }
        });
      }
    },
    submit() {
      if (!this.form.logo) {
        uni.showToast({
          title:'请选择入驻商logo',
          icon: "none"
        });
        return;
      }
      if (!this.form.name) {
        uni.showToast({
          title:'请输入商户名称',
          icon: "none"
        });
        return;
      }
      if (!this.form.realname) {
        uni.showToast({
          title: '请输入联系人',
          icon: "none"
        });
        return;
      }
	  
	  if (!this.form.tel) {
	    uni.showToast({
	      title: '请输入电话',
	      icon: "none"
	    });
	    return;
	  }
	  if (!this.form.wechat_name) {
	    uni.showToast({
	      title: '请输入联系微信',
	      icon: "none"
	    });
	    return;
	  }
	  if (!this.form.mch_common_cat_id) {
	    uni.showToast({
	      title: '请选择店铺类目',
	      icon: "none"
	    });
	    return;
	  }
      if (!this.form.province_id) {
        uni.showToast({
          title: this.$t("my.chooseRegion"),
          icon: "none"
        });
        return;
      }
      if (!this.form.address) {
        uni.showToast({
          title: this.$t("shop.detailAddress"),
          icon: "none"
        });
        return;
      }
     

      uni.showLoading({
        title: "请稍等",
        mask: true
      });
	

      this.$allrequest.mch_store
        .mchStoreSet(this.form)
        .then((res) => {
          uni.hideLoading();
          if (!res.code) {
			  this.getList()
            uni.showToast({
            	title: res.msg,
            	duration: 2000
            });

          }
        })
        .catch((err) => {
          uni.hideLoading();

          uni.showToast({
            title: err.msg,
            icon: "none"
          });
        });
    },
  }
}
</script>

<style lang="scss" scoped>
	.active{
		padding-bottom: 20rpx;
		color: coral;
		font-weight: 600;
	}
	.active1{
		padding-bottom: 20rpx;
		color: red;
		font-weight: 600;
	}
	.form-box {
	  background: #fff;
	  padding: 0 30rpx;
	}
.applyShop {
  height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
  display: flex;
  flex-direction: column;

  .swiper {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .head {
    width: 100%;
    height: 360rpx;
    display: block;
  }

  .scroll {
    flex: 1;
    overflow-y: auto;
  }

  .formBox {
    padding-left: 30rpx;
    background-color: #fff;
    .formItem {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;
      .title {
        width: 160rpx;
        font-size: 30rpx;
        text-align: left;
      }
      input {
        flex: 1;
        text-align: left;
      }
      .input-hold {
        color: #8c8c8c;
      }
      .chooseClass {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 24rpx;
        }
      }
      .area-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);

          input {
            color: rgb(38, 38, 38);
          }
        }
      }
      .address-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);
        }
        .local-box {
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            color: #8c8c8c;
          }
          text {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
          }
        }
      }
    }
	.formItem1 {
	  padding: 30rpx 0;
	  display: flex;
	  align-items: center;
	  padding-right: 30rpx;
	  border-bottom: 1px solid #f1f1f1;
	  .title {
	    width: 160rpx;
	    font-size: 30rpx;
	    text-align: left;
	  }
	  input {
	    flex: 1;
	    text-align: left;
	  }
	  .input-hold {
	    color: #8c8c8c;
	  }
	  .chooseClass {
	    display: flex;
	    align-items: center;
	    font-size: 28rpx;
	    color: #8c8c8c;
	    .iconfont {
	      font-size: 24rpx;
	    }
	  }
	  .area-info {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    text {
	      font-size: 28rpx;
	      font-family: PingFang SC;
	      font-weight: 400;
	      color: #8c8c8c;
	    }
	    .color-black {
	      color: rgb(38, 38, 38);
	
	      input {
	        color: rgb(38, 38, 38);
	      }
	    }
	  }
	  .address-info {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    .info-text {
	      font-size: 28rpx;
	      font-family: PingFang SC;
	      font-weight: 400;
	      color: #8c8c8c;
	    }
	    .color-black {
	      color: rgb(38, 38, 38);
	    }
	    .local-box {
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      .iconfont {
	        color: #8c8c8c;
	      }
	      text {
	        font-size: 30rpx;
	        font-family: PingFang SC;
	        font-weight: 400;
	        color: #8c8c8c;
	      }
	    }
	  }
	}
    .address-form {
      display: flex;
      align-items: flex-start;
      .info-text {
        width: 80%;
      }
    }
    .choosePic {
      padding: 30rpx 0;
      .title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #1d1d1d;
        text:nth-child(2) {
          color: #8c8c8c;
        }
      }
      .choose {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        margin-top: 30rpx;
        margin-right: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 60rpx;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
        .close {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          right: -16rpx;
          top: -16rpx;
          background-color: #f0250e;
          color: #fff;
          font-size: 28rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    .btn {
      width: 678rpx;
      height: 88rpx;
    }
    .tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
}
</style>
